<template>
  <div>
    <el-main>
      <el-row>
        <el-col :xl="5" :md="6" :push="18">
          <el-input clearable @clear="clear" type="text" v-model="input" placeholder="请输入原告/被告/案件号"
            class="input-with-select">
            <el-button slot="append" style="
                background-color: #45a321;
                border: 1px solid #45a321;
                color: #fff;
                border-radius: 0;
              " @click="submit" type="primary">检索</el-button>
            <i slot="prefix-icon" class="el-icon-search"></i>
          </el-input>
        </el-col>
      </el-row>

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="原告/上诉" name="first">
          <el-table style="width: 90%" :header-cell-style="{ background: '#F3F8FE' }" align="center" :data="tableData"
            border class="tableHeight">
            <el-table-column align="center" label="收藏" width="80">
              <template slot-scope="scope">
                <i v-if="is_admin_view == 0" @click="Collection(scope.row.id)" :class="
                  scope.row.is_like == 0
                    ? 'iconfont icon-xin2'
                    : 'iconfont icon-xin2 active'
                "></i>
                <i v-else :class="
                  scope.row.is_like == 0
                    ? 'iconfont icon-xin2'
                    : 'iconfont icon-xin2 active'
                "></i>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="ccto" label="裁决文书">
            </el-table-column>
            <el-table-column align="center" prop="plo" label="原告/上诉人">
            </el-table-column>
            <el-table-column align="center" prop="deo" label="被告/被上诉人">
            </el-table-column>

            <el-table-column align="center" prop="cdn" label="案件号">
            </el-table-column>
            <el-table-column align="center" width="120" label="操作">
              <template slot-scope="scope">
                <el-button class="see" @click="see(scope.row.cid)" type="text">查看</el-button>
                <el-button class="see" @click="openUrl(scope.row.cid)" type="text">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination" style="width: 90%">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="page.page" :page-size="page.page_size" layout="total, prev, pager, next, jumper"
              :total="Number(page.count)" align="left"></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="被告/被上诉" name="second">
          <el-table style="width: 90%" :header-cell-style="{ background: '#F3F8FE' }" align="center" :data="tableData"
            border class="tableHeight">
            <el-table-column align="center" label="收藏" width="80">
              <template slot-scope="scope">
                <i v-if="is_admin_view == 0" @click="Collection(scope.row.id)" :class="
                  scope.row.is_like == 0
                    ? 'iconfont icon-xin2'
                    : 'iconfont icon-xin2 active'
                "></i>
                <i v-else :class="
                  scope.row.is_like == 0
                    ? 'iconfont icon-xin2'
                    : 'iconfont icon-xin2 active'
                "></i>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="ccto" label="裁决文书">
            </el-table-column>
            <el-table-column align="center" prop="plo" label="原告/上诉人">
            </el-table-column>
            <el-table-column align="center" prop="deo" label="被告/被上诉人">
            </el-table-column>
            <el-table-column align="center" prop="cdn" label="案件号">
            </el-table-column>
            <el-table-column align="center" width="120" label="操作">
              <template slot-scope="scope">
                <el-button class="see" @click="see(scope.row.cid)" type="text">查看</el-button>
                <el-button class="see" @click="openUrl(scope.row.cid)" type="text">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination" style="width: 90%">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="page.page" :page-size="page.page_size" layout="total, prev, pager, next, jumper"
              :total="Number(page.count)" align="left"></el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-main>
    <Service />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Service from "@/components/Service";

import {
  Iitigation,
  IitigationSearch,
  IitigationCollection,
  iitigationDownload,
} from "@/api/user";
export default {
  components: {
    Service,
  },
  data() {
    return {
      activeName: "first",
      input: "",
      tableData: [],
      page: [],
      index: 0,
    };
  },
  computed: {
    ...mapGetters([
      "sidebar",
      "avatar",
      "name",
      "roles",
      "type",
      "is_admin_view",
      "rid",
    ]),
  },
  mounted() {
    this.getList();
  },
  methods: {
    handleClick(e) {
      this.index = e.index;
      this.getList();
    },
    async submit() {
      this.$router.push({
        path: "/litigation/docking",
        query: { val: this.input },
      });
      // try{
      //  const res = await IitigationSearch({keyword:this.input})
      //  this.tableData = res.list;
      //  this.page = res.page;
      // } catch (e){
      //   this.$message.error(e.message)
      // }
    },
    see(cid) {
      this.$router.push({ path: "/litigation/details", query: { id: cid } });
    },
    clear() { },
    async Collection(id) {
      try {
        const res = await IitigationCollection({ id: id });
        // console.log(res);
        this.getList();
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    async getList() {
      try {
        const res = await Iitigation({ type: this.index });
        this.tableData = res.list;
        this.page = res.page;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    //每页下拉显示数据
    async handleSizeChange(size) {
      try {
        const res = await Iitigation({
          keywords: this.search,
          type: this.type,
          page: size,
          type: this.index,
        });
        this.tableData = res.list;
        this.page = res.page;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    //点击第几页
    async handleCurrentChange(currentPage) {
      try {
        const res = await Iitigation({
          keywords: this.search,
          type: this.type,
          page: currentPage,
          type: this.index,
        });
        this.tableData = res.list;
        this.page = res.page;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    async openUrl(id) {
      try {
        const res = await iitigationDownload({
          cid: id,
        });
        window.open(res.pdf);
      } catch (error) {
        this.$message.error(error.message);
      }
    },
  },
};
</script>

<style scoped lang="less">
.icon-xin2 {
  font-size: 25px;
}

.active {
  color: rgb(192, 0, 0) !important;
}
</style>
